<template>
	<view class="isDisplay">
		<view v-for="item in list" class="list-item">
			<img :src="item.img" alt="" />
			<text>{{item.title}}</text>
		</view>
	</view>
</template>

<script setup>
	const list=[
		{
			img:"../static/images/home-tab/icon_sj.png",
			title:"设计"
		},
		{
			img:"../static/images/home-tab/icon_kf.png",
			title:"开发"
		},
		{
			img:"../static/images/home-tab/icon_yw.png",
			title:"运维"
		},
		{
			img:"../static/images/home-tab/icon_cs.png",
			title:"测试"
		},
		{
			img:"../static/images/home-tab/icon_yy.png",
			title:"运营"
		},
		{
			img:"../static/images/home-tab/icon_xz.png",
			title:"行政"
		},
		{
			img:"../static/images/home-tab/icon_shuju.png",
			title:"数据"
		},
		{
			img:"../static/images/home-tab/icon_gd.png",
			title:"更多"
		}
	]
</script>

<style>
.isDisplay{
	display: flex;
	flex-wrap: wrap; /* 允许换行 */
	justify-content: flex-start; /* 左对齐 */
	padding:0 20rpx; /* 添加一些内边距 */
}
.isDisplay img{
	width: 73.39rpx;
	height: 73.39rpx;
	margin-bottom: 10rpx; /* 图片和文字间距 */
}
.isDisplay text{
	font-size: 25.23rpx;
	text-align: center; /* 文字居中 */
	color: rgba(102, 110, 122, 1);
}
.list-item{
	width: 25%; /* 每行四个，每个占25%宽度 */
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	  padding: 20rpx 0; /* 上下内边距 */
	  box-sizing: border-box; /* 确保padding不影响宽度计算 */
}
</style>